<template>
  <div id="app">
    <div>
      <span>姓名:</span>
      <input type="text" v-model="uname"/>
    </div>
    <div>
      <span>年龄:</span>
      <input type="number" v-model="uage"/>
    </div>
    <div>
      <span>性别:</span>
      <select v-model="usex">
        <option value="男">男</option>
        <option value="女">女</option>
      </select>
    </div>
    <div>
      <button @click="add">添加/修改</button>
    </div>
    <div>
      <table
        border="1"
        cellpadding="10"
        cellspacing="0"
      >
        <tr>
          <th>序号</th>
          <th>姓名</th>
          <th>年龄</th>
          <th>性别</th>
          <th>操作</th>
        </tr>
        <tr v-for="item,index in list" :key="index">
          <td>{{index+1}}</td>
          <td>{{item.name}}</td>
          <td>{{item.age}}</td>
          <td>{{item.sex}}</td>
          <td>
            <button @click="del(index)">删除</button>
            <button @click="upd(index)">编辑</button>
          </td>
        </tr>
      </table>
    </div>
  </div>
</template>
<script>
export default {
    data () {
        return {
            uname:'',
            uage:'',
            usex:'',
            aaa:false,
            bbb:0,
        list:[
                {
                    name:"TOM",
                    age:18,
                    sex:'男'
                    },{
                    name:"Juy",
                    age:19,
                    sex:'男'
                    },{
                    name:"小李",
                    age:20,
                    sex:'男'
                    }
            ],
        }
    },
    methods:{
        add(){
            if(this.uname ==='' || this.uname==='' || this.uname===''){
                return alert('这三个值都不能为空')
            }
            if(this.aaa === false){
            this.list.push({name:this.uname,age:this.uage,sex:this.usex})
            this.uname="";this.uage="";this.usex="";
            }else {
                this.list[this.bbb].name = this.uname
                      this.list[this.bbb].age = this.uage
                      this.list[this.bbb].sex= this.usex
            }
        },
        del(i){
            if(confirm("确定删除吗？")){
                 this.list.splice(i,1);
             }
              },
              upd(i){
                  this.uname=this.list[i].name;
                  this.uage=this.list[i].age;
                  this.usex=this.list[i].sex;
                  this.aaa = true
                  this.bbb = i
              }
             }
        }
</script>
